<template>
  <div class="container">
    <toolbar
      :title="booksVo.booksName"
      :back="true"
      :collection="true"
      :isCollection="booksVo.collection"
      @handleCollectClick="handleCollectClick"
    ></toolbar>
    <div class="t-container cover-content">
      <scroll :data="data">
        <selection-head :booksVo="booksVo"></selection-head>
        <section-desc :booksVo="booksVo"></section-desc>
        <!--下载客户端 -->
        <section-discuss :booksId="bookId"></section-discuss>
        <section-books :sortId="booksVo.sortId"></section-books>
      </scroll>
    </div>
  </div>
</template>

<script>
import Toolbar from "../../components/Toolbar";
import Scroll from "components/Scroll";

import SelectionHead from "./components/SelectionHead";
import SectionDesc from "./components/SectionDesc";
import SectionDiscuss from "./components/SectionDiscuss";
import SectionBooks from "./components/SectionBooks";

import { getBooksById } from "api/BooksApi";
import {saveCollection} from 'api/CollectionApi'
import {show} from 'utils/Base'


export default {
  name: "DetailIndex",
  inject: ['reload'],
  components: {
    Toolbar,
    Scroll,
    SelectionHead,
    SectionDesc,
    SectionDiscuss,
    SectionBooks
  },
  data() {
    return {
      booksVo: {},
      data: [],
      bookId: ""
    };
  },
  methods: {
    getBookDetail() {
      getBooksById({
        id: this.bookId
      }).then(res => {
        if (res.meta.success) {
          this.$nextTick(() => {
            this.booksVo = res.data;
          });
        }
      });
    },
    handleCollectClick (isCollection) {
      saveCollection({
        bookId: this.bookId,
        collection: isCollection
      }).then(res => {
        if(res.meta.success) {
          const msg = isCollection ? "收藏成功" : "取消收藏";
          show(msg);
        }
      });
    }
  },
  created() {
    this.bookId = this.$route.params.bookId;
    this.getBookDetail();
  },
  watch : {
    '$route' (to, from) { //监听路由是否变化
		  if(to.params.bookId != from.params.bookId){
			  this.reload()
		  }
	  }

  }
};
</script>

<style lang="stylus" scoped>
@import '~assets/css/style.styl';
</style>
